<template>
  <div class="art">
    <div>
      <el-table :data="list" border>
        <el-table-column type="index" width="60" label="顺序" align="center"></el-table-column>
        <el-table-column prop="title" width="260" label="标题" align="center"></el-table-column>
        <el-table-column prop="name" width="180" label="文件" align="center"></el-table-column>
        <el-table-column prop="like" width="60" label="点赞" align="center"></el-table-column>
        <el-table-column prop="type" width="60" label="类型" align="center"></el-table-column>
        <el-table-column label="创建时间" prop="create_time" align="center" width="180px"></el-table-column>
        <el-table-column label="操作" align="center" width="150px" fixed="right">
          <template #default="scope">
            <!-- <el-button type="info" :icon="elicons.Message" circle @click="handleDetail(scope.row)" /> -->
            <el-button type="primary" :icon="elicons.Edit" circle @click="handleUpdate(scope.row)" />
            <!-- <el-button type="danger" :icon="elicons.Delete" circle @click="handleDelete(scope.row)" /> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="数据详情" v-model="isEdit" width="800px">
      <div>
        <el-input v-model="detail.title"></el-input>
      </div>
      <div>
        <el-input v-model="detail.name" disabled></el-input>
      </div>
      <div>
        <el-input v-model="detail.type"></el-input>
      </div>
      <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
          :mode="mode" />
        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
          :mode="mode" @onCreated="handleCreated" />
        <!-- <div class="box" v-html="valueHtml"></div> -->
      </div>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: right;">
        <el-button type="primary" @click="save">保 存</el-button>
        <el-button @click="() => { isEdit = false }">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onBeforeUnmount, ref, shallowRef, onMounted, getCurrentInstance } from 'vue'
import { queryData } from '@/apis/mysql'
import elicons from '@/utils/elicons';
const { proxy } = getCurrentInstance()
const list = ref([])
function getList() {
  queryData({
    table: 'arts',
    data: {},
    query: {
      page: 1,
      show: 100
    }
  }).then(res => {
    list.value = res.data
    // console.log(res)
  })
}

function getResource() {
  queryData({
    table: 'resources',
    data: {},
    query: {
      page: 1,
      show: 100
    }
  }).then(res => {
    // list.value = res.data
    // console.log(res)
  })
}
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const mode = ref('')
const photoGalleryDialogVisible = ref(false)
const videoGalleryDialogVisible = ref(false)

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

// 模拟 ajax 异步获取内容
onMounted(() => {
  // setTimeout(() => {
  //   valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
  // }, 1500)
  getResource()
  getList()
})

// 工具栏配置
const toolbarConfig = {
  toolbarKeys: [
    // 一些常用的菜单 key
    'bold', // 加粗
    'italic', // 斜体
    'through', // 删除线
    'underline', // 下划线
    'bulletedList', // 无序列表
    'numberedList', // 有序列表
    'color', // 文字颜色
    'insertLink', // 插入链接
    'fontSize', // 字体大小
    'lineHeight', // 行高
    'uploadImage', // 上传图片
    'uploadVideo',//上传视频
    'delIndent', // 缩进
    'indent', // 增进
    'deleteImage',//删除图片
    'divider', // 分割线
    'insertTable', // 插入表格
    'justifyCenter', // 居中对齐
    'justifyJustify', // 两端对齐
    'justifyLeft', // 左对齐
    'justifyRight', // 右对齐
    'undo', // 撤销
    'redo', // 重做
    'clearStyle', // 清除格式
    'fullScreen' // 全屏
  ]
}

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    // 可以在这里配置菜单项，例如上传图片的配置
    uploadImage: {
      server: '你的图片上传接口',
      fieldName: 'file',
      methods: 'post',
      metaWithUrl: true,
      customInsert: (res, insertFn) => {
        insertFn(res.url)
      }
    }
  }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

// 组件创建时
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  // console.log(editor)
}

const isEdit = ref(false)
const fileName = ref('')
const detail = ref(null)
function handleUpdate(row) {
  isEdit.value = true
  fileName.value = row.name
  detail.value = row
  let path = 'D:/cyc/files/arts/'
  proxy.$system.readFile(`${path + row.name}.txt`).then(res => {
    console.log(res)
    valueHtml.value = res
  })
}

function save(){
  let path = 'D:/cyc/files/arts/'
  proxy.$system.writeFile(`${path + fileName.value}.txt`, valueHtml.value).then(res => {
    // console.log(res)
    isEdit.value = false
  })
}

</script>
<style scoped lang="scss">
.box {
  width: 100%;
  height: 300px;
  background-color: #fff;
  color: black;
  margin-top: 10px;
}
</style>
